import { createRouter, createWebHistory } from 'vue-router'
// 导入我们的页面组件
import HomeView from '../views/HomeView.vue'
import MemberManagementView from '../views/MemberManagementView.vue'
// 导入子组件，因为它们现在要作为独立的路由页面
import MemberList from '@/components/member/MemberList.vue'
import MemberDetail from '@/components/member/MemberDetail.vue'
import BranchManagementView from '@/views/BranchManagementView.vue'
import BranchList from '@/components/branch/BranchList.vue'
import BranchDetail from '@/components/branch/BranchDetail.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      // 这是父路由，作为成员管理的容器
      path: '/members',
      component: MemberManagementView,
      // 使用 children 属性定义嵌套路由
      children: [
        {
          // 当访问 /members 时，默认显示列表
          path: '', // path为空，表示是/members的默认子路由
          name: 'member-list',
          component: MemberList
        },
        {
          // 当访问 /members/some-id 时，显示详情
          // :id 是一个动态参数，可以匹配任何成员的ID
          path: ':id',
          name: 'member-detail',
          component: MemberDetail,
          props: true // 这会将路由参数 (如 :id) 作为 props 传递给 MemberDetail 组件
        }
      ]
    },
    {
      // --- 这里是修改的核心 ---
      // 党支部管理路由 (采用与 members 相同的嵌套结构)
      path: '/branches',
      // 父路由组件，用于提供一个统一的布局和数据管理环境
      component: BranchManagementView,
      // 定义子路由
      children: [
        {
          // 当访问 /branches 时, 默认显示支部列表
          path: '', // path为空, 表示是 /branches 的默认子路由
          name: 'branch-list',
          component: BranchList
        },
        {
          // 当访问 /branches/some-id 时, 显示支部详情
          path: ':id', // :id 是动态参数
          name: 'branch-detail',
          component: BranchDetail,
          props: true // 将路由参数 (:id) 作为 props 传递给 BranchDetail 组件
        }
      ]
    }
  ]
})

export default router